import { default } from '../../../../../../i18n/en/sports';
<template>
	<div class="item-wrap flex flex-col w-full px-[35px]">
		<div class="flex flex-row w-full border-b border-border-2 py-[5px]">
			<account-avatar
				@click.stop="handleProfile"
				class="w-[30px]"
				:width="36"
				:data="item.avatar" />
			<div class="flex-1 px-[8px] text-xs">
				<div class="">{{ item.userNick || item.userName }}</div>
				<div class="text-t-3">@{{ item.userName }}</div>
				<div class="text-t-2">{{ item.content }}</div>
			</div>
			<div class="w-[120px] flex items-center flex-row-reverse">
				<span class="date-t text-xs text-t-4">
					{{ fmtDateTime(item.createdAt) }}
				</span>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { AccountAvatar } from '@/components/account/'
import { useProfileStore } from '@/store'
import { fmtDateTime } from '@/utils/date.ts'

const profileStore = useProfileStore()
const props = defineProps({
	item: {
		type: Object,
		default: () => {}
	}
})

const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: props.item.userId
	})
}
</script>
